<template>
  <view class="page">
    <scroll-view
        style="height: 100%"
        @scrolltolower="getList"
        scroll-y="true"
        lower-threshold="100px"
        scroll-with-animation="true"
    >
      <!--使用自定义的搜索组件 -->
      <my-search @ToSearchClick="gotoSearch"></my-search>
      <!-- 轮播图 -->
      <view class="swiper-box">
        <view class="uni-margin-wrap">
          <swiper
              class="swiper"
              circular
              :indicator-dots="indicatorDots"
              :autoplay="autoplay"
              :interval="interval"
              :duration="duration"
          >
            <swiper-item v-for="item in swiperList" :key="item.index">
              <view class="swiper-item">
                <image :src="item.imgUrl"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <!-- 简要分类 -->
      <concert-sort></concert-sort>
      <!-- 抢票播报站  演出日历 演出攻略 -->
      <view class="message-container">
        <Ticket-broadcast></Ticket-broadcast>
        <view class="message-rgbox">
          <view class="box box1" @click="toCalendar">
            <view class="bold-text"> 演出日历</view>
            <view class="detail"> 近期好演出</view>
            <view class="icon"></view>
          </view>
          <view class="box box2" @click="toDiscount">
            <view class="bold-text"> 演出活动</view>
            <view class="detail"> 低价看演出</view>
            <view class="icon"></view>
          </view>
        </view>
      </view>
      <!-- 近期新演 -->
      <new-concert></new-concert>
      <!-- 为你推荐 -->
      <view class="recommend-container">
        <view class="top-box">
          <view class="title">同城演出</view>
        </view>
        <concertList
            :concertList="concertList"
            :hasMore="hasMore"
            :loading="loading"
        ></concertList>
      </view>
    </scroll-view>
    <tabbar current="0"></tabbar>
  </view>
</template>

<script>
import {
  getAllWannaPerformanceIds,
  getConcertList,
  getNewsPerformance,
} from "../../api/user/concert";
import concertList from "../../uni_modules/uni-badge/components/concert-list/concert-list.vue";
import {isLogin} from "../../utils/auth";
import store from "../../store";
import {queryUserInfo} from "../../api/user/user";

export default {
  components: {
    concertList,
  },
  onLaunch() {
    uni.hideTabBar();
  },
  onShow() {
    // 如果用户已经登录则获取wanna的演出
    if (isLogin()) {
      getAllWannaPerformanceIds().then((res) => {
        if (res.success) {
          store.commit("initUserWanna", res.data);
        }
      });
    }
    // 重新获取页面数据
    this.concertList = [];
    this.hasMore = true;
    this.loading = false;
    this.condition = {
      pageNum: 1,
      pageSize: 5,
    };
    this.getList();
  },
  data() {
    return {
      swiperList: [
        {
          id: 0,
          imgUrl: "../../static/test/1.png",
        },
        {
          id: 1,
          imgUrl: "../../static/test/2.png",
        },
        {
          id: 2,
          imgUrl: "../../static/test/3.png",
        },
        {
          id: 3,
          imgUrl: "../../static/test/4.png",
        },
      ],
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      concertList: [],
      hasMore: true,
      loading: false,
      condition: {
        pageNum: 1,
        pageSize: 5,
      },
    };
  },
  created() {
    if (isLogin()) {
      queryUserInfo().then((res) => {
        if (res.success) {
          store.commit("saveUserInfo", res.data);
        }
      });
    }
  },
  methods: {
    // 点击搜索导航跳转
    gotoSearch() {
    },
    getList() {
      if (!this.hasMore || this.loading) return;
      this.loading = true;
      // 携带上城市
      this.condition.venueCity = this.$store.state.searchCity;
      getConcertList(this.condition).then((res) => {
        this.concertList = [...this.concertList, ...res.data.rows];
        this.hasMore =
            this.condition.pageNum * this.condition.pageSize <= res.data.total;
        ++this.condition.pageNum;
        this.loading = false;
      });
    },
    toDiscount() {
      uni.navigateTo({
        url: "/subpkg/discountConcert/discountConcert",
        fail(error) {
          console.log(error);
        },
      });
    },
    toCalendar() {
      uni.navigateTo({
        url: "/subpkg/concert-calender/concert-calender",
        fail(error) {
          console.log(error);
        },
      });
    },
  },
};
</script>
<style lang="scss">
.page {
  height: calc(100% - 150upx);
}

.none {
  bottom: 0upx;
  z-index: 33;
  width: 100%;
  height: 140upx;
}

.swiper-box {
  position: relative;
  background-color: #d4237a;
  width: 100%;
  height: 170px;
}

.uni-margin-wrap {
  position: absolute;
  top: 12px;
  left: 15px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 1px 2px 2px #cfcfcf;
  background-color: white;
  width: 92%;
  border-radius: 8px;
}

.swiper {
  // background-color: blue;
  height: 330rpx;
}

.swiper-item {
  display: block;
  height: 330rpx;
  line-height: 330rpx;
  text-align: center;

  image {
    width: 100%;
    height: 100%;
  }
}

.message-container {
  position: relative;

  .message-rgbox {
    position: absolute;
    background-color: white;
    top: 0px;
    right: 0px;
    width: 47%;
    height: 100%;

    .box {
      position: relative;
      width: 93%;
      height: 48%;
      margin-bottom: 3px;
      border-radius: 10px;
      color: #363636;
      box-shadow: 2px 2px 2px #cfcfcf;

      .bold-text {
        width: 55%;
        text-align: center;
        font-size: 20px;
        font-weight: 800;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      .detail {
        font-size: 14px;
        margin-top: 5px;
        color: #8a8a8a;
        width: 50%;
        text-align: center;
      }

      .icon {
        position: absolute;
        bottom: 5px;
        right: 5px;
        width: 30%;
        height: 70%;
        // background-color: aqua;
      }
    }

    .box1 {
      background-image: linear-gradient(
              181.2deg,
              rgb(239, 254, 254) 10.5%,
              rgb(249, 249, 249) 86.8%
      );

      .icon {
        background-image: url("../../static/home/cd-1.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }

    .box2 {
      background-image: linear-gradient(
              181.2deg,
              rgb(254, 250, 238) 10.5%,
              rgb(249, 249, 249) 86.8%
      );
      margin-top: 5px;

      .icon {
        background-image: url("../../static/home/gl-1.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
}

.recommend-container {
  margin-top: 30px;

  width: 100%;
}

.top-box {
  box-sizing: border-box;
  background-color: white;
  padding-left: 8px;
  width: 100%;
  height: 38px;

  .title {
    float: left;
    width: 34%;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    line-height: 38px;
  }
}
</style>
